<div data-page="recommendedcinemas" class="page">
    <style>
        .cinema-list.list-block {
            margin: 0;
            padding-top: 41px;
        }
        .search-cinema-list.list-block {
            margin: 0;
        }
    </style>
    <form class="col-80 searchbar searchbar-init" action="#">
        <a href="cityhome" class="button button-round color-white city-select"
           style="width: 20%;margin-right: 2%;">定位</a>
        <div class="searchbar-input">
            <input type="search" placeholder="影院搜索" style="border-radius: 27px;"/>
            <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">取消</a>
    </form>
    <div class="page-content infinite-scroll" data-distance="50">
        <div class="search-invalid">
            <div class="swiper-container cinema-banner-swiper" style="font-size: 0;">
                <div class="swiper-wrapper">
                {{#each banners}}
                    <div class="swiper-slide">
                        {{#if banner_type}}
                            <a class="external" href="{{banner_url}}">
                                <img onerror="onAlbumPosterError(this)" src="{{CINEMA_BANNER_POSTER banner_poster}}"
                                     style="width: 100%;height: 50vw">
                            </a>
                        {{else}}
                            <a data-ignore-cache="true" href="#" class="cinema-url" data-code="{{cinema_code}}">
                                <img onerror="onAlbumPosterError(this)" src="{{CINEMA_BANNER_POSTER banner_poster}}"
                                     style="width: 100%;height: 50vw">
                            </a>
                        {{/if}}
                    </div>
                {{/each}}
                </div>
                <!-- Pagination, if required -->
                <div class="swiper-pagination color-custom"></div>
            </div>

            <div id="filter">
                <div class="s1 region-label">附近</div>
                <div class="s1 sort-label">距离最近</div>
                <div class="s1 type-label">可预约</div>
                <div class="s2 region-list" style="display: none;">
                    <ul class="l1"></ul>
                    <div class="s3"></div>
                </div>
                <div class="s2 sort-list" style="display: none;">
                    <ul class="l3">
                    </ul>
                </div>
                <div class="s2 type-list" style="display: none;">
                    <ul class="l3">
                    </ul>
                </div>
            </div>
            <div class="list-block virtual-list cinema-list media-list"></div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
                <div class="preloader-text">正在加载...</div>
            </div>
        </div>
        <div class="search-effective" style="display: none">
            <div class="list-block media-list virtual-list search-cinema-list"></div>
        </div>
    </div>
</div>